import {
  Button,
  Form,
  FormItem,
  InputNumber,
  message,
  Modal,
  Select,
  SelectOption
} from 'ant-design-vue'
import { defineComponent, nextTick, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Input } from 'vxe-table'

import { commonApi, userApi } from '@/apis'
import { ProEditor, ProEditorProps, ProEditorRef, ProTable } from '@/components'
import UploadFile from '@/components/UploadFile'
import { bus, optionsToMap } from '@/utils'

export default defineComponent({
  name: 'QzyCommunityEdit',
  setup() {
    const editorRef = ref({} as ProEditorRef)
    const editorConfig = ref({
      wrapStyle: {
        width: '700px'
      },
      editorStyle: {
        height: '350px'
      },
      editorHtml: '',
      editorVisible: false,
      editorConfig: {
        MENU_CONF: {
          uploadImage: {
            server: commonApi.uploadFileUrl,
            fieldName: 'file',
            customInsert(res: any, insertFn: any) {
              // res 即服务端的返回结果
              const url = res.data
              // 从 res 中找到 url alt href ，然后插图图片
              insertFn(url, '', '')
            },
            maxFileSize: 10 * 1024 * 1024,
            onError(file: File, err: any, res: any) {
              if (file && file.size > 10 * 1024 * 1024) {
                message.error('图片超过10M，请压缩图片或分段上传')
              }
            }
          }
        } as any
      },
      toolbarConfig: {
        excludeKeys: ['group-video']
      }
    } as ProEditorProps)
    // //获取订单详情
    // async function getOrderDetail() {
    //   loading.value = true
    //   try {
    //     expressInfo.value = await qzyApi.qzyOrderlDetail(route.query.orderNo)
    //   } finally {
    //     loading.value = false
    //   }
    // }
    //富文本初始化
    function editorStart() {
      editorConfig.value.editorVisible = true
    }
    onMounted(() => {
      editorStart()
    })
    const router = useRouter()
    function handleCheck(id) {
      router.push({ name: 'QzyUserPhoto', query: { id: id } })
    }
    return {
      editorConfig,
      editorRef,
      editorStart
    }
  },
  render() {
    return (
      <div>
        <Form labelCol={{ span: 2 }}>
          <FormItem label="文章标题:">
            <Input
              placeholder="请输入内容标题"
              style={{ width: '250px' }}
            ></Input>
          </FormItem>
          <FormItem label="集赞规则设置:">
            <Select style={{ width: '250px' }} placeholder="请选择"></Select>
          </FormItem>
          <FormItem label="文章主图:" style={{ marginTop: '30px' }}>
            <UploadFile>上传图片</UploadFile>
          </FormItem>
          <FormItem style={{ marginTop: '30px' }} label="内容文案">
            <ProEditor
              style={{ width: '720px' }}
              ref="editorRef"
              {...this.editorConfig}
            />
          </FormItem>
          <FormItem>
            <Button
              style={{
                width: '200px',
                height: '45px',
                marginLeft: '135px',
                marginRight: '50px'
              }}
              onClick={this.handleConfirm}
            >
              取消
            </Button>
            <Button
              type="primary"
              style={{ width: '200px', height: '45px' }}
              onClick={this.handleConfirm}
            >
              保存
            </Button>
          </FormItem>
        </Form>
      </div>
    )
  }
})
